// 蛇对象的代码
(function (w) {
    // 声明一个list来存放蛇的身体的div
    let list = []

    // 1. 声明一个构造函数，创建蛇对象
    function Snake(width, height, direction) {
        this.width = width || 20
        this.height = height || 20
        this.direction = direction || 'right' // 蛇的默认移动方向
        // 因为游戏初始化的蛇身体是三节，每一节身体颜色都是不一样的. 所以用数组来表示蛇的身体，这样写的优势在于，吃到食物长身体，可以直接在数组内的尾部添加元素
        // 蛇的每一节身体都有x、y、bgColor
        this.body = [{
            x: 3,
            y: 1,
            bgColor: 'red'
        }, {
            x: 2,
            y: 1,
            bgColor: 'black'
        }, {
            x: 1,
            y: 1,
            bgColor: '#f90'
        }]
    }
    // 2. 把创建的蛇对象渲染到游戏地图中
    Snake.prototype.render = function (map) {
        // 渲染移动后的蛇之前删除移动前的蛇
        remove(map)
        // 把蛇的每一节身体遍历出来
        for (let i = 0; i < this.body.length; i++) {
            // this.body[i] 代表蛇的每一节身体
            // 创建div
            let divs = document.createElement('div')
            // 把当前蛇的身体的所有显示信息赋值给div
            divs.style.width = this.width + 'px'
            divs.style.height = this.height + 'px'
            divs.style.backgroundColor = this.body[i].bgColor
            divs.style.position = 'absolute'
            divs.style.left = this.body[i].x * this.width + 'px'
            divs.style.top = this.body[i].y * this.height + 'px'
            // 把div添加到map中
            map.appendChild(divs)
            // 把这个div保存在list中
            list.push(divs)
        }
    }
    // 3. 封装一个蛇移动的方法
    Snake.prototype.move = function (food, map) {
        // 3.1 除了蛇头之外的部分移动的坐标
        for (let i = this.body.length - 1; i > 0; i--) {
            this.body[i].x = this.body[i - 1].x
            this.body[i].y = this.body[i - 1].y
        }
        // 3.2 蛇头移动后的坐标
        switch (this.direction) {
            case 'right':
                this.body[0].x++
                break
            case 'left':
                this.body[0].x--
                break
            case 'top':
                this.body[0].y--
                break
            case 'bottom':
                this.body[0].y++
                break
        }
        // 判断蛇是否吃到食物
        // 就是判断蛇头的坐标和食物的坐标是否重叠
        // 蛇头的坐标
        let snakeHeadX = this.body[0].x * this.width
        let snakeHeadY = this.body[0].y * this.height
        // 食物的坐标
        let foodX = food.x
        let foodY = food.y
        // 取出最后一节的蛇尾的坐标
        let lastSnake = this.body[this.body.length - 1]
        // 判断
        if (snakeHeadX == foodX && snakeHeadY == foodY) {
            // 代码进到这里说明吃到了食物
            this.body.push({
                x: lastSnake.x,
                y: lastSnake.y,
                bgColor: backColor()
            })
            // 蛇吃到食物后产生新的事物
            // 调用食物的render方法，给食物重新随机一个坐标
            food.render(map)
        }
    }
    // 随机颜色
    function backColor() {
        let arr = ['#f90', 'black']
        let bgc
        for (let i = 0; i < arr.length; i++) {
            let index = Math.floor(Math.random() * 2)
            bgc = arr[index]
        }
        return bgc
    }
    // 4. 声明一个方法，删除移动前的蛇
    function remove(map) {
        for (let i = 0; i < list.length; i++) {
            map.removeChild(list[i])
        }
        // 清空list数组
        list.length = 0
    }
    // 把蛇对象暴露出去
    w.Snake = Snake
}(window))